<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>光谷智慧交通</title>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <!-- bootstrap-table -->
    <link
      rel="stylesheet"
      href="./node_modules/bootstrap-table/dist/bootstrap-table.min.css"
    />
    <script src="./node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="./node_modules/bootstrap-table/src/locale/bootstrap-table-zh-CN.js"></script>
    <!-- anxiang-->

    <script src="./node_modules/bootstrap-table-master/dist/bootstrap-table.min.js"></script>
    <script src="./node_modules/bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="./node_modules/bootstrap-table-master/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="./node_modules/bootstrap-table-master/dist/extensions/editable/bootstrap-table-editable.js"></script>
    <script src="./node_modules/x-editable-1.5.1/dist/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
    <script src="./js/login/plugs/tableExport.min.js"></script>
    <script src="./js/login/plugs/xlsx.core.min.js"></script>
    <script src="./js/login/changgePsw.js"></script>
    <script src="./js/login/userManager.js"></script>
    <script src="./js/login/login.js"></script>
    <script src="./js/login/showVedio.js"></script>
    <script src="./js/login/main.js"></script>
    <script src="./node_modules/crypto-js/crypto-js.js"></script>
    <link
      rel="stylesheet"
      href="./node_modules/x-editable-1.5.1/dist/bootstrap-editable/css/bootstrap-editable.css"
    />
    <!-- 表单验证 -->
    <script src="./js/login/plugs/bootstrapValidator.min.js"></script>
    <link rel="stylesheet" href="./js/login/plugs/bootstrapValidator.min.css" />

    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_2891081_ljkdem1m98c.css"
    />
    <script src="./lib/include-openlayers-local.js"></script>
    <script src="./js/TiandiTu.js"></script>
    <!-- 图层样式 -->
    <script src="./js/style.js"></script>
    <!-- 交互式画笔 -->
    <script src="./js/interaction.js"></script>
    <!-- 测量事件 -->
    <script src="./js/tools/measurement.js"></script>
    <!-- 保存文件--导出图片 -->
    <script src="./node_modules/file-saver/dist/FileSaver.js"></script>
    <script src="./js/tools/exportImg.js"></script>
    <!-- 切换图层 -->
    <script src="./js/tools/toggleLayer.js"></script>
    <!-- 地图点击弹窗事件 -->
    <script src="./js/main/mapClickPop.js"></script>
    <!-- 实时路况 -->
    <script src="./js/main/showCurrentRoads.js"></script>
    <!-- 发布公告 -->
    <script src="./js/main/announce.js"></script>
    <!-- 事件查询 -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="./js/zd_docEdit.class.js"></script>
    <script src="./js/main/eventQuery.js"></script>

    <!-- 图层目录树 -->
    <script src="./js/main/Y-CatalogTree.js"></script>
    <!-- 报告路况和查询路况 -->
    <script src="./js/main/Y-ReportAndQueryTraffic.js"></script>
    <!-- 事件添加和更新 -->
    <script src="./js/main/Y-AddAndPutTraffic.js"></script>

    <!-- 样式 -->
    <link rel="stylesheet" href="./css/measure.css" />
    <link rel="stylesheet" href="./css/controls.css" />
    <link rel="stylesheet" href="./css/Popup.css" />
    <link rel="stylesheet" href="./css/footer.css" />
    <link rel="stylesheet" href="./css/announce.css" />
    <link rel="stylesheet" href="./css/catalogTree.css" />
    <link rel="stylesheet" href="./css/Y-prop.css" />
    <link rel="stylesheet" href="./js/login/plugs/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="./css/Y-useless.css" />
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      text-decoration: none !important;
      list-style-type: none;
    }

    .navbar {
      margin-bottom: 0px;
    }
    .navbar-default .navbar-nav > li > a:hover {
      background-color: skyblue;
    }

    /* canvas尺寸 */
    #mapCon {
      width: 100%;
      height: 100%;
      position: absolute;
    }
    /* 缩放控件位置 */
    /* .ol-zoom {
					position: fixed;
					top: 5em;
					left: 106em;
				} */

    /* 遮罩层 */
    .mask {
      position: absolute;
      top: 0px;
      background-color: #777;
      z-index: 99;
      left: 0px;
      opacity: 0.5;
      display: none;
    }

    @media (max-width: 1320px) {
      .nav > li > a {
        padding: 15px 10px;
      }
    }
  </style>
  <body>
    <!-- <div class="tool-box" id="toolBox">
      <div class="row">
        <div class="col-md-12">
          <div class="tool-box-y">
            工具箱
            <ul class="menu">
              <li id="m_dis"><a href="#">测量距离</a></li>
              <li id="m_area"><a href="#">测量面积</a></li>
              <li id="m_exit"><a href="#">关闭测量</a></li>
              <li id="exp_img"><a href="#">导出图片</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div> -->

    <!-- 搜索框 -->
    <div class="search-part">
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input
            type="text"
            class="form-control index-serch"
            id="search_keywords"
            placeholder="请输入查询交通事故信息"
          />
        </div>
        <button
          class="btn btn-default serch-btn"
          onclick="eventQueryClear(eventSource)"
        >
          清除
        </button>
        <button
          class="btn btn-default serch-btn search-btn-query"
          onclick="return eventQueryByKeyword(userType,eventSource)"
        >
          <i class="iconfont icon-fangdajing"></i>
        </button>
      </form>
    </div>

    <!-- logo -->
    <div class="label label-default logo">
      <a href="#">
        <i class="iconfont icon-gongjiaoche"></i>
        <span>光谷智慧交通系统</span>
      </a>
    </div>

    <!-- 右侧导航条 -->
    <nav class="navbar navbar-default navbar-rightpart">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#bs-example-navbar-collapse-1"
            aria-expanded="false"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <div class="tool-box" id="toolBox">
                <div class="row">
                  <div class="col-md-12">
                    <div class="tool-box-y">
                      工具箱
                      <ul class="menu">
                        <li id="m_dis">
                          <a class="fa fa-facebook"> 测量距离 </a>
                        </li>
                        <li id="m_area">
                          <a class="fa fa-google-plus"> 测量面积 </a>
                        </li>
                        <li id="m_exit">
                          <a class="fa fa-twitter"> 关闭测量 </a>
                        </li>
                        <li id="exp_img">
                          <a class="fa fa-linkedin"> 导出图片 </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <a href="#" onclick="handleClickCurrentRoads()" id="traffic">
                实时路况
              </a>
            </li>
            <li>
              <a href="#" onclick="openReportTraffic()" id="report">
                报告路况
              </a>
            </li>
            <li>
              <a
                href="#"
                onclick="viewAnnouncement()"
                data-toggle="modal"
                data-target="#viewAnnounceModal"
                id="viewAnnce"
              >
                查看公告
              </a>
            </li>
            <li class="dropdown" id="queryEvent">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
              >
                交通管理
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li role="presentation" class="dropdown-header">
                  交通事故管理
                </li>
                <li>
                  <a href="#" onclick="openTrafficInfo()" id="trafficInfo">
                    路况审核
                  </a>
                </li>
                <li>
                  <a href="#" onclick="addTraffic()" id="addEvent">
                    事件添加
                  </a>
                </li>
                <li>
                  <a href="#" onclick="putTraffic()" id="updateEvent">
                    事件更新
                  </a>
                </li>
                <li>
                  <a
                    href="#"
                    onclick="eventQueryByGeom(eventSource,source,map)"
                  >
                    事件查询
                  </a>
                </li>
                <li role="presentation" class="divider"></li>
                <li role="presentation" class="dropdown-header">公告管理</li>
                <li>
                  <a href="#" onclick="handleAnnounceClick()" id="announce">
                    发布公告
                  </a>
                </li>
                <li role="presentation" class="divider"></li>
                <li role="presentation" class="dropdown-header">
                  路口监控管理
                </li>
                <li><a href="#" id="vedio">视频监控</a></li>
              </ul>
            </li>
            <!-- <li class="dropdown" id="toolBox">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
              >
                工具箱
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li id="m_dis"><a href="#">测量距离</a></li>
                <li id="m_area"><a href="#">测量面积</a></li>
                <li id="m_exit"><a href="#">关闭测量</a></li>
                <li id="exp_img"><a href="#">导出图片</a></li>
              </ul>
            </li> -->
            <li class="dropdown">
              <a
                class="dropdown-toggle"
                id="user"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
              >
                登录
                <span class="caret"></span>
              </a>
              <ul
                class="dropdown-menu"
                id="usermenu"
                style="min-width: unset"
              ></ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>

    <!-- 遮罩层 -->
    <div id="mask" class="mask"></div>

    <!-- 安详的弹窗 -->
    <div
      id="modal"
      class="modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    ></div>
    <div
      class="modal fade"
      id="tipsModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    ></div>
    <!-- 事件添加 -->
    <div class="traffic-add traffic-prop">
      <div class="prop-title">
        <span>事件添加</span>
        <button
          class="prop-close glyphicon glyphicon-remove btn-default"
          onclick="closeTrafficProp()"
        ></button>
      </div>

      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputPassword4" class="col-sm-3 control-label">
            事件编号
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="checked-event-id"
              required
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputType" class="col-sm-3 control-label">
            事件类型
          </label>
          <div class="col-sm-6">
            <select id="checked-event-type" class="form-control">
              <option value="刮擦">刮擦</option>
              <option value="碰撞">碰撞</option>
              <option value="翻车">翻车</option>
              <option value="碾压">碾压</option>
              <option value="失火">失火</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="inputType" class="col-sm-3 control-label">
            事件等级
          </label>
          <div class="col-sm-6">
            <select id="checked-event-level" class="form-control">
              <option value="轻微事故">轻微事故</option>
              <option value="一般事故">一般事故</option>
              <option value="重大事故">重大事故</option>
              <option value="特大事故">特大事故</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword3" class="col-sm-3 control-label">
            事件地址
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="checked-event-addr"
              placeholder="请输入路况地址，包含事故路段"
              required
            />
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword5" class="col-sm-3 control-label">
            发生时间
          </label>
          <div class="col-sm-6">
            <input
              type="datetime-local"
              class="form-control"
              id="checked-event-time"
              required
            />
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword4" class="col-sm-3 control-label">
            车牌号
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="checked-car-number"
              required
            />
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword6" class="col-sm-3 control-label">
            司机姓名
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="checked-car-driver"
              required
            />
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-10">
            <button type="submit" class="btn btn-default" id="addTraffic">
              确定
            </button>
            <button
              type="button"
              class="btn btn-default"
              onclick="closeTrafficProp()"
            >
              取消
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- 事件更新 -->
    <div class="traffic-put traffic-prop">
      <div class="prop-title">
        <span>事件更新</span>
        <button
          class="prop-close glyphicon glyphicon-remove btn-default"
          onclick="closeTrafficProp()"
        ></button>
      </div>

      <form class="form-horizontal">
        <div class="form-group">
          <label for="put-event-id" class="col-sm-3 control-label">
            事件编号
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="put-event-id"
              required
              disabled
            />
          </div>
        </div>
        <div class="form-group">
          <label for="put-event-type" class="col-sm-3 control-label">
            事件类型
          </label>
          <div class="col-sm-6">
            <select id="put-event-type" class="form-control" disabled>
              <option value="刮擦">刮擦</option>
              <option value="碰撞">碰撞</option>
              <option value="翻车">翻车</option>
              <option value="碾压">碾压</option>
              <option value="失火">失火</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="put-event-level" class="col-sm-3 control-label">
            事件等级
          </label>
          <div class="col-sm-6">
            <select id="put-event-level" class="form-control" disabled>
              <option value="轻微事故">轻微事故</option>
              <option value="一般事故">一般事故</option>
              <option value="重大事故">重大事故</option>
              <option value="特大事故">特大事故</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label for="put-event-addr" class="col-sm-3 control-label">
            事件地址
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="put-event-addr"
              placeholder="请输入路况地址，包含事故路段"
              required
              disabled
            />
          </div>
        </div>

        <div class="form-group">
          <label for="put-event-time" class="col-sm-3 control-label">
            发生时间
          </label>
          <div class="col-sm-6">
            <input
              type="datetime-local"
              class="form-control"
              id="put-event-time"
              required
              disabled
            />
          </div>
        </div>

        <div class="form-group">
          <label for="put-car-number" class="col-sm-3 control-label">
            车牌号
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="put-car-number"
              required
              disabled
            />
          </div>
        </div>

        <div class="form-group">
          <label for="put-car-driver" class="col-sm-3 control-label">
            司机姓名
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="put-car-driver"
              required
              disabled
            />
          </div>
        </div>

        <div class="form-group">
          <label for="put-event-status" class="col-sm-3 control-label">
            事件状态
          </label>
          <div class="col-sm-6">
            <select id="put-event-status" class="form-control">
              <option value="0">待处理</option>
              <option value="1">处理中</option>
              <option value="2">已归档</option>
            </select>
          </div>
          <div
            class="col-sm-1 control-label glyphicon glyphicon-asterisk"
          ></div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-10">
            <button type="submit" class="btn btn-default" id="putTraffic">
              确定
            </button>
            <button
              type="button"
              class="btn btn-default"
              onclick="closeTrafficProp()"
            >
              取消
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- 查询路况信息 -->
    <div class="traffic-info traffic-prop">
      <div class="prop-title traffic-info-title">
        <span>路况信息</span>
        <button
          class="prop-close glyphicon glyphicon-remove btn-default"
          onclick="closeTrafficProp()"
        ></button>
      </div>
      <div class="panel panel-default">
        <table
          id="tb_roadinfo"
          class="table"
          style="table-layout: fixed; word-break: break-all"
        ></table>
      </div>
    </div>

    <!-- 报告路况 -->
    <div class="traffic-report traffic-prop">
      <div class="prop-title">
        <span>报告路况</span>
        <button
          class="prop-close glyphicon glyphicon-remove btn-default"
          onclick="closeTrafficProp()"
        ></button>
      </div>

      <form class="form-horizontal">
        <div class="form-group">
          <label for="inputType" class="col-sm-3 control-label">
            事件类型
          </label>
          <div class="col-sm-6">
            <select id="event-type" class="form-control">
              <option value="刮擦">刮擦</option>
              <option value="碰撞">碰撞</option>
              <option value="翻车">翻车</option>
              <option value="碾压">碾压</option>
              <option value="失火">失火</option>
            </select>
          </div>
          <div
            class="col-sm-1 control-label glyphicon glyphicon-asterisk"
          ></div>
        </div>

        <div class="form-group">
          <label for="inputPassword3" class="col-sm-3 control-label">
            事件地址
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="event-attr"
              placeholder="请输入路况地址，包含事故路段"
              required="required"
            />
          </div>
          <div
            class="col-sm-1 control-label glyphicon glyphicon-asterisk"
          ></div>
        </div>

        <div class="form-group">
          <label for="inputPassword4" class="col-sm-3 control-label">
            建筑标识
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="event-mark"
              placeholder="请输入事故最近的建筑标识"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword5" class="col-sm-3 control-label">
            发生时间
          </label>
          <div class="col-sm-6">
            <input type="datetime-local" class="form-control" id="event-time" />
          </div>
          <div
            class="col-sm-1 control-label glyphicon glyphicon-asterisk"
          ></div>
        </div>

        <div class="form-group">
          <label for="inputPassword6" class="col-sm-3 control-label">
            事件描述
          </label>
          <div class="col-sm-6">
            <input
              type="text"
              class="form-control"
              id="event-describe"
              placeholder="请输入事故的具体信息"
            />
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-10">
            <button
              type="submit"
              class="btn btn-default"
              onclick="reportTraffic()"
            >
              确定
            </button>
            <button
              type="button"
              class="btn btn-default"
              onclick="closeTrafficProp()"
            >
              取消
            </button>
          </div>
        </div>
      </form>
    </div>

    <!-- 目录树 -->
    <div class="container_left" id="docLayerTree">
      <div class="container_left_title">
        <p>图层目录</p>
      </div>
      <div class="container_left_content"></div>
    </div>
    <!-- 目录树隐藏显示控制 -->
    <div
      class="container_left_control"
      onclick="containerLeftToggle()"
      id="docLayerTreeBtn"
    >
      >>
    </div>

    <!-- 查看公告 -->
    <div
      class="modal fade"
      id="viewAnnounceModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">查看公告</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <table class="table" id="viewAnnounce-table"></table>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-dismiss="modal">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>

    <div id="mapCon">
      <!-- 鼠标位置容器 -->
      <div id="mouse-position"></div>
      <!-- 图层图层切换 -->
      <div class="layers">
        <ul id="layer-list">
          <li onclick="handleToggleLayers(event,map,0)">
            <a href="#">
              <img src="./images/tianditu-img.png" alt="" />
            </a>
          </li>
          <li class="selected" onclick="handleToggleLayers(event,map,2)">
            <a href="#">
              <img src="./images/tianditu-vector.png" alt="" />
            </a>
          </li>
        </ul>
      </div>
      <!-- Popup -->
      <div id="popup" class="ol-popup">
        <a
          href="#"
          id="popup-closer"
          class="ol-popup-closer"
          onclick="closePopup()"
        ></a>
        <div id="popup-content">
          <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading"></div>
            <table class="table" id="popup-table"></table>
          </div>
        </div>
      </div>
      <!--底部发布公告  -->
      <div class="footer hide" id="footer-announce">
        <div class="panel panel-default">
          <div class="panel-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item active">
                <a
                  class="nav-link active"
                  id="home-tab-announce"
                  data-toggle="tab"
                  href="#home-announce"
                  role="tab"
                  aria-controls="home"
                  aria-selected="true"
                >
                  发布公告
                </a>
              </li>
              <a
                class="card-link1"
                data-toggle="collapse"
                href="#collapseFooter-announce"
                onclick="toggleIcon(event)"
              >
                <span class="glyphicon glyphicon-chevron-down"></span>
              </a>
              <!-- 关闭弹窗及事件查询图层 -->
              <a class="card-link2" onclick="closeFooterAnnounce()">
                <span class="glyphicon glyphicon-remove"></span>
              </a>
            </ul>
          </div>
          <div
            id="collapseFooter-announce"
            class="collapse in"
            aria-expanded="true"
          >
            <div class="tab-content" id="myTabContent-announce">
              <div
                class="tab-pane fade show active in"
                id="home-announce"
                role="tabpanel"
                aria-labelledby="home-tab-announce"
              >
                <form>
                  <div class="form-group">
                    <!-- <div class="panel panel-default"> -->
                    <!-- Default panel contents -->
                    <!-- <div class="panel-heading">
                  受道路施工影响的区域与物业电话
                </div> -->
                    <table class="table" id="announce-table">
                      <tr>
                        <th>区域名称</th>
                        <th>物业电话</th>
                      </tr>
                    </table>
                    <!-- 分页 -->
                    <nav
                      aria-label="Page navigation"
                      id="annouce-nav"
                      style="height: 50px"
                    >
                      <label
                        for="footer-pagination"
                        id="announce-total"
                        style="margin-left: 40px"
                      ></label>
                      <ul
                        class="pagination"
                        id="announce-pagination"
                        style="margin: 10px 20px"
                      ></ul>
                    </nav>
                    <!-- </div> -->
                  </div>
                  <div class="form-group" style="margin-bottom: 25px">
                    <label
                      for="message-text"
                      class="col-form-label"
                      style="margin-left: 40px"
                    >
                      公告信息:
                    </label>
                    <textarea
                      class="form-control"
                      id="annouce-message"
                      style="
                        width: 78%;
                        float: right;
                        margin-right: 35px;
                        margin-bottom: 10px;
                      "
                    >
您好, xxx道路近期维修, 时间为xxxx年xx月-xxxx年xx月, 请及时规划出行路线, 避免对您的出行造成影响.</textarea
                    >
                  </div>
                </form>
              </div>
              <div class="panel-footer clearfix">
                <button
                  type="button"
                  class="btn btn-primary"
                  onclick="submitAnnounce()"
                  style="float: right; margin-right: 20px"
                >
                  发布公告
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部事件查询数据显示栏 -->
      <div class="footer hide" id="footer-event">
        <div class="panel panel-default">
          <div class="panel-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  id="home-tab"
                  data-toggle="tab"
                  href="#home"
                  role="tab"
                  aria-controls="home"
                  aria-selected="true"
                >
                  查询列表
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="profile-tab"
                  data-toggle="tab"
                  href="#profile"
                  role="tab"
                  aria-controls="profile"
                  aria-selected="false"
                >
                  统计分析
                </a>
              </li>
              <li class="nav-item">
                <a
                  class="nav-link"
                  id="contact-tab"
                  role="tab"
                  data-toggle="tab"
                  href="#contact"
                  aria-controls="contact"
                  aria-selected="false"
                  onclick="addHotFeatures(heatmapSource)"
                >
                  热力图
                </a>
              </li>
            </ul>
            <!-- 折叠 -->
            <a
              class="card-link1"
              data-toggle="collapse"
              href="#collapseFooter"
              onclick="toggleIcon(event)"
            >
              <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
            <!-- 关闭弹窗及事件查询图层 -->
            <a class="card-link2" onclick="closeFooter()">
              <span class="glyphicon glyphicon-remove"></span>
            </a>
          </div>
          <div id="collapseFooter" class="collapse in" aria-expanded="true">
            <!-- 滑动门 -->
            <div class="tab-content" id="myTabContent">
              <!-- 表格 -->
              <div
                class="tab-pane fade show active"
                id="home"
                role="tabpanel"
                aria-labelledby="home-tab"
              >
                <!-- Table -->
                <table class="table" id="footer-table">
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>事故类型</th>
                      <th>事故等级</th>
                      <th>发生时间</th>
                      <th>事故地点</th>
                      <th>肇事司机</th>
                      <th>肇事车辆</th>
                      <th>处理状态</th>
                    </tr>
                  </thead>
                </table>
                <!-- 分页 -->
                <nav aria-label="Page navigation">
                  <label for="footer-pagination" id="total"></label>
                  <ul class="pagination" id="footer-pagination"></ul>
                </nav>
              </div>
              <!-- 统计分析-->
              <div
                class="tab-pane fade"
                id="profile"
                role="tabpanel"
                aria-labelledby="profile-tab"
              >
                <form class="form-inline mb-2">
                  <div class="form-group mx-sm-3 mb-2">
                    <select
                      id="selection"
                      class="form-control"
                      name="selection"
                      style="width: 150px; margin-left: 430px"
                    >
                      <option value="none" selected disabled hidden>
                        请选择统计字段
                      </option>
                      <option value="type">事件类型</option>
                      <option value="level">事件等级</option>
                      <option value="month">月份</option>
                    </select>
                  </div>
                  <button
                    type="button"
                    class="btn btn-info mb-2"
                    onclick="addEcharts()"
                  >
                    统计分析
                  </button>
                </form>
                <div id="echarts-1" class="myecharts"></div>
              </div>
              <!-- 热力图 -->
              <div
                class="tab-pane fade"
                id="contact"
                role="tabpanel"
                aria-labelledby="contact-tab"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    //显示遮罩层
    function showMask() {
      $('#mask').css('height', $(document).height() - 1)
      $('#mask').css('width', $(document).width())
      $('#mask').show()
    }
    //隐藏遮罩层
    function hideMask() {
      $('#mask').hide()
      source.clear()
    }

    const BaseURL = 'http://localhost:3000/API/V1'
    let userType = '0'
    let user_id //获取登录的用户id
    //console.log(userType)

    const map = new ol.Map({
      target: 'mapCon',
      layers: [TiandiMap_img, TiandiMap_cia, TiandiMap_vec, TiandiMap_cva],
      view: new ol.View({
        projection: 'EPSG:4326',
        center: ol.extent.getCenter([
          114.321103824701, 30.4545175015849, 114.417985804936,
          30.5289619425023,
        ]),
        zoom: 13,
      }),
    })

    const docLayer = new Zondy.Map.Doc('', 'GuangGu', {
      ip: 'localhost',
      port: 6163,
      crossOrigin: 'Anonymous',
    })

    map.addLayer(docLayer)

    //交互式绘制画布
    const source = new ol.source.Vector() //图层数据源
    const vector = new ol.layer.Vector({
      source: source,
      style: measureStyle,
    })
    map.addLayer(vector)

    //工具的点击事件  把参数放到event对象里
    $('#m_dis').click('dis', meaStart)
    $('#m_area').click('area', meaStart)
    $('#m_exit').click(exit)
    $('#exp_img').click(exportImg)
    //地图点击事件的监听
    map.on('click', addPopup)

    //-------controls-----begin-----------
    //1. 复位控件
    const zoomToExtent = new ol.control.ZoomToExtent({
      //确定一个范围, 左下角经度, 左下角维度, 右上角经度, 右上角维度
      extent: [
        114.321103824701, 30.4545175015849, 114.417985804936, 30.5289619425023,
      ],
    })
    //添加控件
    map.addControl(zoomToExtent)

    //2. 滑块控件
    // const zoomslider = new ol.control.ZoomSlider()
    // //添加控件
    // map.addControl(zoomslider)

    //3. 鼠标位置控件
    const mousePositionControl = new ol.control.MousePosition({
      //坐标格式(保留四位小数)
      coordinateFormat: ol.coordinate.createStringXY(4),
      //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
      projection: 'EPSG:4326',
      //坐标信息显示样式类名，默认是'ol-mouse-position'
      className: 'custom-mouse-position',
      //显示鼠标位置信息的目标容器
      target: document.getElementById('mouse-position'),
      //未定义坐标的标记
      undefinedHTML: '&nbsp;',
    })
    //添加控件
    map.addControl(mousePositionControl)

    //4. 比例尺控件
    const scaleLineControl = new ol.control.ScaleLine({
      //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
      units: 'metric',
    })
    //添加控件
    map.addControl(scaleLineControl)

    //5. 鹰眼控件
    const overviewMapControl = new ol.control.OverviewMap({
      //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
      className: 'ol-overviewmap ol-custom-overviewmap',
      //鹰眼中加载同坐标系下不同数据源的图层
      layers: [TiandiMap_img, TiandiMap_cia, TiandiMap_vec, TiandiMap_cva],
      view: new ol.View({
        projection: 'EPSG:4326',
      }),
      //鹰眼控件展开时功能按钮上的标识（网页的JS的字符编码）
      collapseLabel: '\u00BB',
      //鹰眼控件折叠时功能按钮上的标识（网页的JS的字符编码）
      label: '\u00AB',
      //初始为展开显示方式
      collapsed: false,
    })
    //2.5.2 添加控件
    map.addControl(overviewMapControl)
    //-------controls-----end-----------

    //=======创建弹窗图层=============
    //创建实时路况图层弹窗
    const popup = new ol.Overlay(
      /** @type {olx.OverlayOptions} */
      ({
        //要转换成overlay的HTML元素
        element: document.getElementById('popup'),
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: false,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250,
        },
      })
    )
    map.addOverlay(popup)

    //============事件查询交互式画布===================
    // const drawSource = new ol.source.Vector({ wrapX: false })
    // const drawLayer = new ol.layer.Vector({
    //   source: drawSource,
    // })
    // map.addLayer(drawLayer)

    //============创建事件查询图层==================
    const eventSource = new ol.source.Vector({
      wrapX: false,
      //解决导出图片, 画布污染问题
    })
    //创建图层对象, 将数据源添加到图层图像
    const eventLayer = new ol.layer.Vector({
      source: eventSource,
      style: icon,
      name: 'eventLayer',
    })
    map.addLayer(eventLayer)

    //===========创建实时路况图层=====================
    const currentRoadsSource = new ol.source.Vector({
      wrapX: false, //解决导出图片, 画布污染问题
    })
    //创建图层对象, 将数据源添加到图层图像
    const currentRoadsLayer = new ol.layer.Vector({
      source: currentRoadsSource,
      name: 'currentRoadsLayer',
    })
    map.addLayer(currentRoadsLayer)

    //================热力图=================
    const heatmapSource = new ol.source.Vector({
      wrapX: false,
      //解决导出图片, 画布污染问题
    })
    const heatmapLayer = new ol.layer.Heatmap({
      source: heatmapSource,
      radius: 10,
      blur: 10,
    })
    map.addLayer(heatmapLayer)

    //视频监控
    const videovectorSource = new ol.source.Vector()
    const videovectorLayer = new ol.layer.Vector({
      source: videovectorSource,
      name: 'videovectorLayer',
    })
    map.addLayer(videovectorLayer)
  </script>
</html>
